<template>
	<view class="type">
		<view class="box" v-for="item in typeList" :key="item.id">
			<view class="title">{{item.cate_name}} <text class="tips">{{item.tips}}</text> </view>
			<view class="list">
				<view class="item" :style="{'color':it.select?'#2354E3':''}" v-for="(it, index) in item.child" :key="it.id" @click="onchooseItem(it)">{{ it.cate_name }}
				</view>
			</view>
		</view>
		<view class="kefu">
		  <view class="kbox" @click="$uniApi.to('/pages/my/about')">
		    <image :src="icon?icon:'/static/icon/kefu.png'" mode="aspectFill" />
		  </view>
		</view>
		<view style="margin-top: 32rpx; font-size: 32rpx;">
			如有疑问请咨询客服
		</view>
		<view class="sure-btn" @click="selected">
			确定
		</view>
		<!-- <view class="box sensitive">
			<view class="title">敏感货</view>
			<view class="list">
				<view class="item" v-for="(item, index) in sensitiveList" :key="index"
					:style="{ color: chooseItem == item ? '#2354E3' : '' }" @click="onchooseItem(item)">{{ item }}</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList:[],
				// 选中项
				chooseItem: [],
				options:'',
				icon:''
			};
		},
		onLoad(option) {
			if(option.form){
				this.options = option.form;
			}
			this.getInitData();
			this.getIcon();
		},
		methods: {
			// 获取联系手机号
			getIcon() {
				this.$api.post({
					url: "/ebapi/public_api/connection",
					data: {},
					success: (res) => {
						this.icon = res.icon;
					},
				})
			},
			getInitData(){
				this.$api.post({
					url: "/ebapi/store_api/get_product_category",
					data: {},
					success: (res) => {
						this.typeList = res;
						console.log(res,"res 包裹类型")
					},
				 })
			},
			selected(){
				this.chooseItem= [];
				this.typeList.forEach(item=>{
					if(item.child){
						item.child.forEach(it=>{
							if(it.select){
								this.chooseItem.push(it);
							}
						})
					}
				})
				this.$uniApi.rt(`/pages/home/packagePrediction?type=${JSON.stringify(this.chooseItem)}&data=${this.options}`);
			},
			onchooseItem(item) {
				this.$set(item,"select",!item.select)
				console.log(item,item.select)
			},
		},
	};
</script>

<style lang="scss">
	page {
		padding: 0;
		background-color: #fafafa;
	}

	.type {
		padding: 65rpx 55rpx;
		font-size: $uni-text-size-title;
		.sure-btn{
			line-height: 70rpx;
			background-color: #2354E3;
			color: #ffff;
			text-align: center;
			border-radius: 20rpx;
			margin-top: 40rpx;
		}
		.tips{
			font-size: 32rpx; color: red;
		}
		.box {
			margin-bottom: 60rpx;
			.title {
				// color: #999999;
				margin-bottom: 55rpx;
				
			}
			.list {
				display: flex;
				flex-wrap: wrap;

				.item {
					margin-right: 35rpx;
					margin-bottom: 36rpx;
					padding: 15rpx 36rpx;
					background: #ffffff;
					box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.04);
					border-radius: 4rpx;
					opacity: 1;
				}
			}
		}
		.kefu {
		  display: flex;
		  justify-content: flex-end;
		  margin: 30rpx;
			position: fixed; top: 80%; right: 0;
		  .kbox {
		    width: 92rpx;
		    height: 92rpx;
		    position: sticky;
		    bottom: 30rpx;
			  image{
				  width: 100%; height: 100%;
			  }
		  }
		}
		// .sensitive {
		// 	margin-top: 60rpx;
		// }
		
	}
</style>